<template>
    <div class="busOne">
        {{msg}}
        <p>兄弟组件传来的值: <span class="two">{{dataFromTwo}}</span></p>
        <p><input type="text" class="msg"  v-model="value"  placeholder="请输入显示到兄弟组件上的文字"  @input="showToTwo"/></p>
    </div>
</template>
<script>
import {eventBus} from '../../eventBus.js'
export default {
    data() {
      return {
         msg: '我是第一个子组件busOne',
         dataFromTwo: '第一个子组件',
         value:null
      };
    },
    created() {
      // 监听数据改变 方法一
        console.log('初始化created之前  ',this.dataFromTwo);
            eventBus.$on('msg',(data) =>{
                console.log('兄弟组件传来的值： ', data);
                console.log('busOne的created()的this指向  ',this); //输出的结果：busOne的created()的this指向   VueComponent {_uid: 20, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent…}
                this.dataFromTwo = data;
            });  
    },
    // 监听数据改变 方法二
    // created: function() {
    //     var that = this;
    //     console.log('vue中this指向  ',that);
    //     eventBus.$on('msg',function(data){
    //         that.dataFromTwo = data;
    //     });
    // }
    methods: {
        showToTwo() {
            console.log('我是第一个子组件触发改变数据  ',this.value);
            let data = this.value;
            eventBus.$emit('change',data);
        }
    }
}
</script>
<style lang="scss">
.busOne {
  width:100%;
  height:200px;
  background:yellow;
  color:red
  .two {
    font-size: 14px;
    font-weight: bold;
  }
  .msg {
      width: 280px;
  }
}
</style>


